<template>
  <view>
<!--    首页弹窗广告-->
    <uni-popup ref="adPop" type="center" border-radius="10px 10px 0 0">
      <view class="adPop" :class="{'adPopShow':adPopShow}">
        <text class="close ebao-iconfont ebao-ic_close" @click="$refs.adPop.close()"></text>
        <swiper :style="{height:swiperHeight}" class="swiper" :class="advData.length==1?'on':''" autoplay duration="500" @change="stopChange">
          <swiper-item v-for="(item,index) in advData" :key="index" >
            <view class="swiper-item">
              <view class="swiper-item-img">
                <image  :id="'img'+index" @load="(e) => onImageLoad(e, index)" @click="jump(item.link)" :src="item.img" mode="widthFix"></image>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {getIndexPopAd} from "@/api/leaseOrder";

export default {
  data() {
    return {
      swiperHeight:'375px',
      advData:[],
      adPopShow:false
    }
  },
  mounted() {
    this.getIndexPopAd()
  },
  methods: {
    onImageLoad(e,index) {
      if(index==0){
        // 获取第一张图片元素真实高度 ==> 然后设置swiper元素高度
        this.$nextTick(() => {
          // 延迟获取，不然高度不准确
          setTimeout(() => {
            const query = uni.createSelectorQuery().in(this);
            query.select('#img0').boundingClientRect(data => {
              if (data) {
                this.swiperHeight = data.height+'px'
                this.adPopShow=true
              }
            }).exec();
          }, 300);
        });
      }
    },
    getIndexPopAd(){
      getIndexPopAd().then(res=>{
        if(res.status==200){
          if(res.data.status==1){
            this.advData=res.data.value
            this.$refs.adPop.open()
          }
        }
      })
    },
    jump(url) {
      if(url){
        clearInterval(this.timecount)
        this.$util.JumpPath(url);
      }
    },
    stopChange(){
      if(this.advData.length == 1){
        return false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.adPopShow{
  opacity: 1 !important;
}
.adPop{
  position: relative;
  opacity: 0;
  transition: all 0.3s ease-in;
  .close{
    position: absolute;
    top: -50rpx;
    right: -10rpx;
    color: #ffff;
  }
}
.swiper{
  width: 80vw;
  .swiper-item {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    display: flex;
    /* justify-content: center; */
    align-items: flex-end;
    flex-direction: column-reverse
  }

  .swiper-item-img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .swiper-item-img image {
    width: 100%;
    height: 100%;
  }
}
</style>